<template>
  <view>
	<view class="header">
		<image class="header-bgc" src="./red.png" mode=""></image>
		<!-- 占位 -->
		<view class="kb"></view>
		<view class="header-top">
			<image  src="./back.png" mode="" @tap="goback"></image>
			<span>详情</span>
			<image src="./likr.png" mode=""></image>
		</view>
		<view class="header-center">
			<image src="./bg.png" mode=""></image>
			<view class="header-center-title">
				<span>跑步爱好者</span>
				<span>5211 成员</span>
			</view>
			<view class="header-center-watch">
				<span>已加入</span>
			</view>
		</view>
		<view class="header-but">
			<span>我们是一群爱好跑步的人，欢迎各位跑步爱好者来到跑 步圈！和大家一起锻炼！</span>
		</view>
	</view>
    <!-- 内容区域 -->
	<view class="contain">
		<view class="contain-main" v-for="item in follow" :key='item.id'>
			<view class="contain-main-top">
				<image src="./bg.png" mode=""></image>
				<view class="contain-main-span">
					<span class='contain-main-span-one' >{{item.name}}</span>
					<span class='contain-main-span-two'>{{item.time}}</span>
				</view>
			</view>
			<view class="contain-main-tit"><span>{{item.smtit}}</span></view>
			<view class="contain-main-content">
				<span>{{item.neirong}}</span>
			</view>
			<view class="contain-main-pic"  >
				<image class="contain-main-pic-image" v-for="(v, i) in item.imgs" :key='i' :src='v'  @tap="showBigImg(v)" >
				
			</view>
			<view class="contain-main-but">
				<view class="lj">
				  <!-- <image src="./m-base.png" mode=""></image> -->
				  <u-icon name="share" color="#ccc" size="40"></u-icon>
				  <span>9</span>
				</view>
				<view class="lj">
				  <!-- <image src="./m-base.png" mode=""></image> -->
				  <u-icon name="chat" color="#ccc" size="40"></u-icon>
				  <span>7</span>
				</view>
				<view class="lj">
				  <!-- <image src="./m-base.png" mode=""></image> -->
				  <u-icon name="star" color="#ccc" size="40"></u-icon>
				  <span>9</span>
				</view>
				<view class="lj">
				  <!-- <image src="./m-base.png" mode=""></image> -->
				  <u-icon name="thumb-up" color="#ccc" size="40"></u-icon>
				  <span>54</span>
				</view>
			</view>
		</view>
	</view>
	<!-- 固定定位 -->
    <view class="butt">
      <image src="./xj1.png" mode=""></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      follow: [
        {
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
        {
          id: 2,
          name: "A***着",
          bq: "明星",
          time: "2023-09-12 12:00",
          smtit: "跑步人的二天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
      ],
    };
  },
  methods: {
    goInfo() {
      uni.navigateTo({
        url: "/pages/community/topiclist/topiclist",
      });
    },
    //点击放大图片
    showBigImg(img) {
      let arr = [];
      arr.push(img);
      console.log(arr, "图片的地址");
      uni.previewImage({
        current: 0,
        urls: arr, //必须是网址路径，否则加载不出来，如：http：或https：
      });
    },
	 goback() {
     uni.navigateBack({
     	delta:1
     })
    },
  },
};
</script>

<style lang="scss">
.header{
	width: 100%;
	height: 500rpx;
	// border: 1rpx solid transparentize($color: #000000, $amount: 0);
	
	.header-bgc{
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 500rpx;
	}
	.kb{
	width: 100%;
	height: 1rpx;
	}
	.header-top{
		width: 700rpx;
		height: 40rpx;
		margin: 0 auto;
		margin-top: 112rpx;
		// border: 1px solid red;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 88rpx;
		color: #fff;
		image:nth-of-type(1){
			width: 34rpx;
			height: 18rpx;
		}
		image:nth-of-type(2){
			width: 34rpx;
			height: 33rpx;
		}
		
	}
	.header-center{
		width: 680rpx;
		height: 112rpx;
		margin: 0 auto;
		// border: 1px solid red;
		display: flex;
		justify-content: flex-start;
		position: relative;
		// background-color: #000;
		margin-bottom: 32rpx;
		image{
			width: 112rpx;
			height: 112rpx;
			margin-right: 20rpx;
		}
		.header-center-title{
			width: 300rpx;
			height: 112rpx;
			// border: 1rpx solid red;
			display: inline-flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			font-size: 36rpx;
			color: #fff;
			span{
				width: 100%;
			}
			span:nth-type-of(2){
				font-size: 24rpx;
			}
			// display: inline-block;
		}
		.header-center-watch{
			width: 120rpx;
			height: 48rpx;
			border-radius: 24rpx;
			background-color: #FFDFDF;
			text-align: center;
			line-height: 48rpx;
			color: #F4333C;
			position: absolute;
			right: 0;
			top:20rpx ;
		}
	}
	.header-but{
		width: 672rpx;
		margin: 0 auto;
		color: #fff;
		font-size: 28rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 20rpx;
	}
}
.contain{
	width: 100%;
	border: 1rpx solid #fff;
	background-color: #fff;
	margin-top: -32rpx;
	border-radius: 30rpx 30rpx 0 0 ;
	padding: 0 32rpx;
	.contain-main{
		width: 686rpx;
		height: 900rpx;
		border-bottom: 1rpx solid #D2D2D2;
		margin: 20rpx auto;
		.contain-main-top{
			width: 100%;
			height: 72rpx;
			// border: 1rpx solid red;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 36rpx;
			image{
				width: 72rpx;
				height: 72rpx;
				border-radius: 50rpx;
				margin-right: 20rpx;
			}
			.contain-main-span{
				width: 300rpx;
				height: 72rpx;
				// background-color: #000;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				.contain-main-span-one{
					width: 100%;
					color: #181818 ;
					font-size: 28rpx !important;
				}
				.contain-main-span-two{
				color: #ACACAC;
				font-size: 24rpx;
				}
				
			}
		}
		.contain-main-tit{
			width: 686rpx;
			height: 36rpx;
			// border: 1px solid red;
			color: #333333;
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 28rpx;
			
			
		}
		.contain-main-content{
			width: 686rpx;
			// border: 1rpx solid red;
			color: #434343;
			margin-bottom: 28rpx;
			span{
				font-size: 28rpx;
			}
		}
		.contain-main-pic{
			width: 686rpx;
			// height: 300rpx;
			// border: 1rpx solid red;
			.contain-main-pic-image{
				width: 218rpx;
				height: 218rpx;
				margin: 5rpx;
			}
		}
		.contain-main-but{
			width: 100%;
			height: 74rpx;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
			text-align: right;
			.lj{
				width: 90rpx;
				// border: 1rpx solid red;
				height: 74rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}
}
.butt {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  position: fixed;
  right: 20rpx;
  bottom: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eb233d;
  image {
    width: 60rpx;
    height: 60rpx;
  }
}
</style>
